<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <!-- Polyfills -->
    <!--[if lt IE 10]>
    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
    <![endif]-->
    <style>
        body,
        #app,
        .app {
            height: 100%;
            overflow: hidden;
        }

        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

        ::-webkit-scrollbar {
            width: 6px;
            height: 16px;
            background-color: #F5F5F5;
        }

        /*定义滚动条轨道 内阴影+圆角*/

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
            /* border-radius: 3px; */
            background-color: #F5F5F5;
        }

        /*定义滑块 内阴影+圆角*/

        ::-webkit-scrollbar-thumb {
            /* border-radius: 3px; */
            -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, .3);
            background-color: #555;
        }
    </style>
</head>

<body>
    <div id="app"></div>
</body>

</html>